<template>
    <div class="frame-sider-container">
        <admin-sider-group title="栏目" >
            <div class="web-frame-part-sider">
                <div class="loading-box" v-if="loading" ><bi-icon loading /></div>
                <div class="loading-box" v-if="tree.length==0 && !loading"  ><bi-button>添加栏目</bi-button></div>
                <bi-tree :data="tree" 
                :storagename="$user.getStorageName('web-part-sider-fold')"  
                type="menu" 
                item-key="part_id" 
                @title-click="handlePartClick" 
                v-if="!loading"
                ></bi-tree>
            </div>
            
        </admin-sider-group>
        <admin-sider-group title="管理">
            <admin-sider-menu v-for="item in menu"  :item="item" v-power="item.power"  ></admin-sider-menu>
        </admin-sider-group>
        
    </div>
    
</template>

<script>
export default {
    data(){
        
        let menu = [
            {
                title:'首页',
                icon:'fa-home',
                power:'web.part',
                url:this.$url({app:'web',controller:'admin.index',action:'index'})
            },
            {
                title:'文章',
                icon:'fa-file-text-o',
                power:'web.article',
                url:this.$url({app:'web',controller:'admin.article',action:'index'})
            },
            {
                title:'栏目',
                icon:'fa-navicon',
                power:'web.part',
                url:this.$url({app:'web',controller:'admin.part',action:'index'})
            },
            {
                title:'页面',
                icon:'fa-file-o',
                power:'web.block',
                url:this.$url({app:'web',controller:'admin.page',action:'index'})
            },
            {
                title:'区块',
                icon:'fa-th-large',
                power:'web.block',
                url:this.$url({app:'web',controller:'admin.block',action:'index'})
            },
            {
                title:'模型',
                icon:'fa-cube',
                power:'web.template',
                url:this.$url({app:'web',controller:'admin.model',action:'index'})
            },
            {
                title:'公共参数',
                icon:'fa-hashtag',
                power:'web.param',
                url:this.$url({app:'web',controller:'admin.param',action:'index'})
            },
            {
                title:'设置',
                power:'web.setting',
                icon:'fa-gear',
                url:this.$url({app:'web',controller:'admin.setting',action:'index'})
            }
        ];
        
        return {
            menu,
            tree:[],
            loading:false
        }
    },
    methods:{
        loadTree(){
            this.loading = true;
            this.$ajax({
                url:this.$url({app:'web','controller':'admin.part',action:'tree'}),
                success:(data)=>{
                    
                    this.$user.setLocalStorage('web-part',data.tree,60);
                    this.setTree(data.tree);

                    this.$nextTick(()=>{
                        this.loading = false;
                    });
                }
            });
        },
        setTree(data){
            this.tree = data;
        },
        handlePartClick(item){
          let id = item.part_id;
          location.href =  this.$url({app:'web',controller:'admin.article',action:'index',gets:{part:id}});
        }
    },
    mounted(){
       let list = this.$user.getLocalStorage('web-part');
       
       if (list){
           this.setTree(list);
       }else{
           this.loadTree();
       }
    }
}
</script>



<style>
.web-frame-part-sider{
    max-height: calc(60vh);
    overflow: auto;
}

.web-frame-part-sider .loading-box{
    text-align: center;
    padding: 30px;
    display: flex;
    align-items:center;
    justify-content: center;
}

.web-frame-part-sider .bi-tree.menu .tree-label{
    padding-top: 5px;
    padding-bottom: 5px;
}
</style>